<template>
	<!-- 车辆整备 -->
	<view>
		<view class="_flex _wrap zhengbei">
			<view class="zhengbeiItem" v-for="item in list">
				<view class="">
					<image style="width: 100rpx;" :src="item.icon" mode="widthFix"></image>
				</view>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="zhengbei">
			<view class="page sortBox _flex align-items_center _justify_between">
				<view class="">
					<u-icon size="30" name="map"></u-icon>
					<text style="margin-right: 10rpx;" @click="cityShow=true">{{form.address}}</text>
					<u-icon size="20" name="arrow-down-fill"></u-icon>
				</view>
				<view class="" @click="typeySortShow=true">
					<text style="margin-right: 10rpx;">{{form.typeSort}}</text>
					<u-icon size="20" name="arrow-down-fill"></u-icon>
				</view>
				<view class="">
					<text style="font-weight: bold;font-size: 34rpx;color: #000;">9.9洗车</text>
					<!-- <u-icon size="20" name="arrow-down-fill"></u-icon> -->
				</view>
				<!-- <view class="">
					<text style="margin-right: 10rpx;">途虎</text>
					<u-icon size="20" name="arrow-down-fill"></u-icon>
				</view> -->
			</view>
		</view>
		<view>
			<view :class="item.type=='guanggao'?'':'zhengbei'" v-for="item in mendianList">
				<view v-if="item.type=='guanggao'" style="padding: 0 20rpx;">
					<image style="height: 160rpx;width: 100%" :src="item.img" mode="scaleToFill"></image>
				</view>
				<view v-else>
					<view class="_flex">
						<view style="margin-right: 26rpx;border-radius: 20rpx;">
							<image style="width: 160rpx;" :src="item.img" mode="widthFix"></image>
						</view>
						<view style="width: 100%;">
							<view class="titlePart">
								<text v-if="item.xin" class="titlePartText-New">{{item.xin}}</text>
								<text class="titlePartText-title">{{item.title}}</text>
							</view>
							<view class="_flex _justify_between">
								<view class="">
									<view style="margin: 12rpx 0;">
										<u-icon name="star-fill" color="#C70F0F" size="20"></u-icon>
										<text
											style="color: #C70F0F;margin-left: 4rpx;font-size: 26rpx;">{{item.xing}}</text>
										<text style="margin: 0 6rpx;color: #ccc">|</text>
										<text>{{item.quantity}}单</text>
									</view>
									<view class="shebei">
										<text class="shebeiPart" v-for="itemson in item.shebeiList">
											{{itemson}}
										</text>
									</view>
								</view>
								<view style="margin-top: 12rpx;">
									{{item.distance}}
								</view>
							</view>
						</view>
					</view>
					<view class="_flex _justify_between" style="margin: 10rpx 0;">
						<view class="">
							<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 10rpx	;">
								标准洗车-五座轿车
							</view>
							<view>
								<text class="yishou">已售{{item.sell}}</text>
							</view>
						</view>
						<view class="">
							<view class="">
								<text class="priceTypeStyle">{{item.priceType}}</text>
								<u-icon name="rmb" color="#C70F0F"></u-icon>
								<text style="color: #C70F0F;font-weight: bold;font-size: 32rpx;">{{item.price}}</text>
							</view>
							<view style="text-align: right;color: #999;font-size: 26rpx;margin-top: 10rpx;">
								门市价<u-icon name="rmb"></u-icon>{{item.menshiPrice}}
							</view>
						</view>
						<view class="qianggou">
							<view style="font-weight: bold;">
								{{item.buyType}}
							</view>
							<view>
								<text style="font-size: 22rpx;color: #F0F0F0;">今日余{{item.yu}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<city-select v-model="cityShow" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
	import citySelect from "../../components/citySelect/u-city-select.vue"
	export default {
		components: {
			citySelect,
		},
		data() {
			return {
				list: [{
						icon: '../../static/b3_1.png',
						name: '标准洗车'
					},
					{
						icon: '../../static/b3_2.png',
						name: '美容'
					},
					{
						icon: '../../static/b3_3.png',
						name: '全车精洗'
					},
					{
						icon: '../../static/b3_4.png',
						name: '打蜡'
					},
					{
						icon: '../../static/b3_5.png',
						name: '贴膜'
					},
					{
						icon: '../../static/b3_6.png',
						name: '内饰'
					},
					{
						icon: '../../static/b3_7.png',
						name: '消毒'
					},
					{
						icon: '../../static/b3_8.png',
						name: '镀晶'
					},
					{
						icon: '../../static/b3_6.png',
						name: '抛光'
					},
					{
						icon: '../../static/b3_1.png',
						name: '车衣改色'
					}
				],
				typeySortShow: false,
				form: {
					address: "星光三街",
					typeSort: "默认排序"
				},
				cityShow: false,
				mendianList: [{
						type: '',
						img: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/neishiIcon/mendian1.png',
						title: '车马驿站汽车服务',
						xing: '5.00',
						quantity: '25',
						distance: '1.62km',
						shebeiList: ['洗手间', '免费停车', '免费WIFI'],
						priceType: '专享价',
						price: '9.9',
						menshiPrice: '58',
						sell: '26',
						yu: '2',
						xin:'新',
						buyType:'抢购'
					},
					{
						type: 'guanggao',
						img: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/neishiIcon/zhengbei.jpg'
					},
					{
						type: '',
						img: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/neishiIcon/mendian1.png',
						title: '维仕达(北京通州区嘉创二路店)',
						xing: '4.99',
						quantity: '816',
						distance: '655m',
						shebeiList: ['免费停车', '免费WIFI'],
						priceType: '专享价',
						price: '9.9',
						menshiPrice: '40',
						sell: '400+',
						yu: '1',
						buyType:'抢购'
					},
					{
						type: '',
						img: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/neishiIcon/mendian1.png',
						title: '好修养(北京通州潞西路店)',
						xing: '4.96',
						quantity: '398',
						distance: '1.32km',
						shebeiList: ['免费停车', '免费WIFI','休息室',],
						priceType: '券后价',
						price: '15.9',
						menshiPrice: '50',
						sell: '30',
						yu: '3',
						buyType:'购买'
					},
				]
			}
		},
		methods: {
			// 城市选择
			cityChange(e) {
				console.log(e)
				this.form.address = e.area.label;
			}
		}
	}
</script>

<style scoped lang="scss">
	.zhengbei {
		padding: 20rpx 10rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
	}

	.zhengbeiItem {
		width: 20%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.sortBox {
		color: #888;
		height: 75rpx;
	}

	.titlePart {
		.titlePartText-New {
			background-color: #19BE6B;
			color: #fff;
			padding: 0 6rpx;
			border-radius: 8rpx;
			font-size: 22rpx;
		}

		.titlePartText-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 10rpx;
		}
	}

	.shebei {
		.shebeiPart {
			border: 1px solid #E5E5E5;
			border-radius: 6rpx;
			color: #999;
			font-size: 22rpx;
			margin-right: 10rpx;
		}
	}

	.yishou {
		border: 1px solid #E5E5E5;
		border-radius: 6rpx;
		color: #999;
		font-size: 22rpx;
	}

	.priceTypeStyle {
		border: 1px solid #C70F0F;
		border-radius: 20rpx;
		color: #C70F0F;
		font-size: 22rpx;
		padding: 0 10rpx;
		margin-right: 6rpx;
	}

	.qianggou {
		text-align: center;
		padding: 10rpx 34rpx;
		background-color: #C70F0F;
		border-radius: 40rpx;
		line-height: 28rpx;
		height: 76rpx;
		color: #fff;
	}
</style>
